<template>
	<view v-if="showPopup" class="pay-popup" @touchmove.stop.prevent="clear">
		<view class="panel">
			<view class="pay-img"> 选择支付方式 </view>
			<!-- 关闭按钮 -->
			<view class="close-img" @click="close">
				<image class="icon_img" :src="url + '/images/entryOrder/close.png'" mode="heightFix" />
			</view>
			<!-- 余额支付 -->
			<view @click="activeTab = 'balpay'" :class="{ 'bal-pay': true, active: activeTab == 'balpay' }">
				<view class="bal-pay-box">
					<view class="left">
						<view class="img">
							<image class="icon_img" :src="url + '/images/entryOrder/money.png'" mode="heightFix" />
						</view>
						<view class="bal-text"> 余额支付 </view>
					</view>
					<view class="right">
						<view class="bal-value">
							(余额：
							<text class="money">{{ balAmount }}</text>)
						</view>
						<view class="join">
							<text>余额充值</text>
						</view>
					</view>
				</view>
				<view class="extra">
					<image v-if="activeTab == 'balpay'" class="icon_img" :src="url + '/images/entryOrder/correct.png'"
						mode="heightFix" />
				</view>
			</view>
			<!-- 微信支付 -->
			<view @click="activeTab = 'wechatpay'" :class="{ 'wechat-pay': true, active: activeTab == 'wechatpay' }">
				<view class="wechat-pay-box">
					<view class="img">
						<image class="icon_img" :src="url + '/images/entryOrder/wx.png'" mode="heightFix" />
					</view>
					<view class="text"> 微信支付 </view>
				</view>
				<view class="extra">
					<image class="icon_img" v-if="activeTab == 'wechatpay'"
						:src="url + '/images/entryOrder/correct.png'" mode="heightFix" />
				</view>
			</view>
			<!-- 提交 -->
			<view class="submit-btn">
				<text class="text" @click="submit">立即支付</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * PopUp 弹出层
	 * @description 弹出层组件，为了解决遮罩弹层的问题
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} type = [top|center|bottom] 弹出方式
	 * 	@value top 顶部弹出
	 * 	@value center 中间弹出
	 * 	@value bottom 底部弹出
	 * @property {Boolean} animation = [ture|false] 是否开启动画
	 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
	 */

	export default {
		name: "UniPopup",
		props: {},
		data() {
			return {
				balAmount: "¥ 0.02",
				showPopup: false,
				activeTab: "wechatpay",
				url: "https://test2.h5.org.cn/001",
			};
		},
		watch: {},
		methods: {
			open() {
				this.showPopup = true;
				this.$nextTick(() => {
					clearTimeout(this.timer);
					this.timer = setTimeout(() => {
						this.showTrans = true;
					}, 50);
				});
				this.$emit("change", {
					show: true,
				});
			},
			close(type) {
				this.showTrans = false;
				this.$nextTick(() => {
					clearTimeout(this.timer);
					this.timer = setTimeout(() => {
						this.$emit("change", {
							show: false,
						});
						this.showPopup = false;
					}, 300);
				});
			},
			submit() {
				this.close();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.pay-popup {
		position: fixed;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		bottom: 0;
		left: 0;
		right: 0;
		/* #ifndef APP-NVUE */
		z-index: 99;
		/* #endif */
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		font-family: PingFang SC;
	}

	.panel {
		width: 100%;
		height: 467rpx;
		background: #ffffff;
		box-shadow: 0rpx 1rpx 30rpx 0rpx rgba(123, 140, 163, 0.12);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: relative;
		padding-top: 43rpx;

		.pay-img {
			width: 100%;
			padding: 0 29rpx 0 40rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
			margin-bottom: 41rpx;
		}

		.close-img {
			position: absolute;
			top: 30rpx;
			right: 47rpx;
			width: 21rpx;
			height: 24rpx;

			.icon_img {
				width: 100%;
				height: 100%;
			}
		}

		.bal-pay {
			margin: 0rpx 49rpx 0rpx 47rpx;
			// height: 30rpx;
			// background: #f0f6f5;
			border-radius: 20rpx;
			border: 3px solid transparent;
			padding: 0 19rpx 0 0;
			display: flex;
			justify-content: space-between;

			// position: relative;
			.bal-pay-box {
				display: flex;
			}

			.left {
				display: flex;
				align-items: center;

				.img {
					width: 44rpx;
					height: 44rpx;
					margin-right: 17rpx;

					.icon_img {
						width: 100%;
						height: 100%;
					}
				}

				.bal-text {
					// font-weight: 500;
					font-size: 26rpx;
					color: #000000;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.bal-value {
					margin-left: 10rpx;
					margin-right: 20rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #49596d;

					.money {
						// font-weight: bold;
						font-size: 30rpx;
						color: #f94230;
					}
				}

				.join {
					font-weight: bold;
					font-size: 26rpx;
					color: #1c71f4;

					.icon_img {
						width: 24rpx;
						height: 24rpx;
						vertical-align: middle;
					}
				}
			}
		}

		.wechat-pay {
			margin: 0 49rpx 0rpx 47rpx;
			// height: 30rpx;
			// background: #f0f6f5;
			border-radius: 20rpx;
			border: 3px solid transparent;
			position: relative;
			padding: 36rpx 19rpx 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.wechat-pay-box {
				display: flex;
				align-items: center;
			}

			.img {
				width: 44rpx;
				height: 44rpx;
				margin-right: 17rpx;

				.icon_img {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #222222;
			}
		}

		.extra {
			width: 37rpx;
			height: 37rpx;
			border-radius: 18rpx;
			border: 1px solid #49596d;
			// opacity: 0.55;
		}

		.active {
			.extra {
				border: none !important;
			}

			.icon_img {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.submit-btn {
			margin: 60rpx 49rpx 0rpx 47rpx;
			height: 96rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #1c71f4;
			border-radius: 47rpx;

			.text {
				font-weight: 500;
				font-size: 38rpx;
				color: #ffffff;
			}
		}
	}
</style>